<template>
  <UpDown>
    <template #head>
      <SelectTool
        :colmuns="colmuns"
        :model-form="modelForm"
        @onFormChange="query"
      ></SelectTool>
    </template>
    <template #content></template>
    <template #footer></template>
  </UpDown>
</template>
<script setup lang="ts">
import { ref } from "vue";
import UpDown from "../test3/layout/UpDown.vue";
import SelectTool from "@/components/selectTool/index.vue";

const colmuns = ref([
  {
    title: "测试1",
    type: "input",
    placeholder: "客官请自便",
    value: "test1",
    width: 150,
    clearable: true,
  },
  {
    title: "测试2",
    type: "input",
    placeholder: "客官请自便",
    value: "test2",
    width: 150,
    clearable: true,
  },
  {
    title: "测试3",
    type: "inputNumber",
    placeholder: "客官请自便",
    value: "test3",
    width: 150,
    clearable: true,
  },
  {
    title: "测试4",
    type: "select",
    placeholder: "客官请自便",
    value: "test4",
    width: 150,
    clearable: true,
    options: [
      { name: "123", value: "123" },
      { name: "345", value: "134523" },
      { name: "124563", value: "145623" },
    ],
  },
]);
const modelForm = ref({});

const query = () => {
  console.log("asd", modelForm.value);
};
</script>
<style scoped>
.test {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  display: flex;
  padding: 15px 10px;
  align-items: center;
}
</style>
